# Introduction

Evergreen exports the following components to build tabbed navigation.

- **Tab**: the base horizontal tab component.
- **Tablist**: a accessibility helper component used when tabs toggle panels on the page.
- **TabNavigation**: a accessibility helper component used when tabs are links.

## Accessibility

The `Tab` component should be wrapped in a `Tablist` or `TabNavigation` component
to comply to [WAI-ARIA](http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml) accessibility standards.

```jsx collapse
function BasicTabsExample() {
  const [selectedIndex, setSelectedIndex] = React.useState(0)
  const [tabs] = React.useState(['Traits', 'Event History', 'Identities'])
  return (
    <Pane height={120}>
      <Tablist marginBottom={16} flexBasis={240} marginRight={24}>
        {tabs.map((tab, index) => (
          <Tab
            aria-controls={`panel-${tab}`}
            isSelected={index === selectedIndex}
            key={tab}
            onSelect={() => setSelectedIndex(index)}
          >
            {tab}
          </Tab>
        ))}
      </Tablist>
      <Pane padding={16} background="tint1" flex="1">
        {tabs.map((tab, index) => (
          <Pane
            aria-labelledby={tab}
            aria-hidden={index !== selectedIndex}
            display={index === selectedIndex ? 'block' : 'none'}
            key={tab}
            role="tabpanel"
          >
            <Paragraph>Panel {tab}</Paragraph>
          </Pane>
        ))}
      </Pane>
    </Pane>
  )
}
```

# Tab Link usage

If you are using a link (`a` tag), make sure to wrap your tabs in a `TabNavigation` component.

```jsx
function TabLinkExample() {
  const tabs = React.useMemo(() => ['Traits', 'Event History', 'Identities'], [])
  // State is only used here for demo purposes, your routing abstraction might support hash links
  const [selectedIndex, setSelectedIndex] = React.useState(0)

  return (
    <TabNavigation>
      {tabs.map((tab, index) => {
        const id = tab.toLowerCase().replace(' ', '-')
        const hash = `#${id}`
        return (
          <Tab
            href={hash}
            is="a"
            isSelected={selectedIndex === index}
            key={tab}
            onClick={() => setSelectedIndex(index)}
          >
            {tab}
          </Tab>
        )
      })}
    </TabNavigation>
  )
}
```

# Sidebar Tabs

Tabs can be rendered in a vertical direction for use in a sidebar.

```jsx collapse
function SidebarTabsExample() {
  const [selectedIndex, setSelectedIndex] = React.useState(0)
  const tabs = React.useMemo(() => ['Traits', 'Event History', 'Identities'], [])

  return (
    <Pane display="flex" height={240}>
      <Tablist marginBottom={16} flexBasis={240} marginRight={24}>
        {tabs.map((tab, index) => {
          return (
            <Tab
              aria-controls={`panel-${tab}`}
              direction="vertical"
              isSelected={index === selectedIndex}
              key={tab}
              onSelect={() => setSelectedIndex(index)}
            >
              {tab}
            </Tab>
          )
        })}
      </Tablist>
      <Pane padding={16} background="tint1" flex="1">
        {tabs.map((tab, index) => (
          <Pane
            aria-labelledby={tab}
            aria-hidden={index !== selectedIndex}
            display={index === selectedIndex ? 'block' : 'none'}
            key={tab}
            role="tabpanel"
          >
            <Paragraph>Panel {tab}</Paragraph>
          </Pane>
        ))}
      </Pane>
    </Pane>
  )
}
```
